<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org.
  -->

<div xmlns="http://www.w3.org/1999/html">
  <h2><span id="searchProductsHeaderLabel" openlmis-message="label.search.product"></span>
    <a href="#/create" class="pull-right btn btn-primary">
      <span id="productAddNew" openlmis-message="button.add.new"></span>
    </a>
  </h2>

  <div class="alert alert-success" id="saveSuccessMsgDiv" ng-show="message">
    <span ng-bind="message"></span>.&nbsp;&nbsp;
    <a id="viewHereLink" href="" ng-click="edit(productId)" openlmis-message="search.viewHere"></a>
  </div>

  <div id="searchControl" class="row-fluid">
    <div class="span5 search-in-category">
      <div class="input-append input-prepend">
        <div class="btn-group">
          <button id='searchOptionButton' class="btn dropdown-toggle">
            <span id="selectedSearchOption" openlmis-message="selectedSearchOption.name"></span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li ng-repeat="searchOption in searchOptions">
              <a id="searchOption{{$index}}" href="" openlmis-message="searchOption.name"
                 ng-click="selectSearchType(searchOption)"></a>
            </li>
          </ul>
        </div>
        <input id='searchProgramProduct' type="text" class="span5" ng-model="query" maxlength="50"
               ng-keydown="triggerSearch($event)" autocomplete="off"/>
        <button class="btn" ng-click="loadProducts(1)">
          <i id='searchIcon' class="icon-search"></i>
        </button>
      </div>
    </div>
  </div>

  <div class="table-container">
    <table id="programProductTable" class="table table-bordered search-list" ng-show="showResults">
      <thead>
      <tr class="gradient-header resultCountHeader">
        <th colspan="11">
        <span ng-switch on="totalItems" ng-show="searchedQuery">
          <h3 id="noResultMessage" ng-switch-when="0" openlmis-message="msg.no.matches|searchedQuery"></h3>
          <h3 id="oneResultMessage" ng-switch-when="1" openlmis-message="msg.one.match|searchedQuery"></h3>
          <h3 id="nResultsMessage" ng-switch-default openlmis-message="msg.many.matches|totalItems|searchedQuery"></h3>
        </span>
          <a id="closeButton" class="close-btn" href="" ng-click="clearSearch()" tabindex="-1"></a>

        </th>
      </tr>
      <tr class="gradient-header" ng-show="programProducts.length">
        <th id="fullSupply" openlmis-message="header.full.supply"></th>
        <th id="code" openlmis-message="header.code"></th>
        <th id="name" openlmis-message="header.name"></th>
        <th id="program" openlmis-message="option.value.program"></th>
        <th id="strength" openlmis-message="header.strength"></th>
        <th id="unitOfMeasure" openlmis-message="header.unit.of.measure"></th>
        <th id="dispensingUnit" openlmis-message="header.dispensing.unit"></th>
        <th id="packSize" openlmis-message="header.pack.size"></th>
        <th id="globalActive" openlmis-message="header.global.active"></th>
        <th id="activeAtProgram" openlmis-message="header.active.at.program"></th>
        <th id="rationing" openlmis-message="header.rationing" ng-show="hasPermission('VIEW_PRODUCT_RATIONING')"></th>
      </tr>
      </thead>
      <tbody ng-repeat="programProduct in programProducts">
      <tr ng-if="programProduct.productCategory">
        <td id="category{{$index}}" class="productCategory" colspan="11"
            ng-show="showCategory($index)"
            ng-bind="programProduct.productCategory.name"></td>
      <tr ng-if="!programProduct.productCategory">
        <td id="category{{$index}}" class="productCategory" colspan="11"
            ng-show="showCategory($index)"
            openlmis-message="label.no.category"></td>
      </tr>
      <tr>
        <td class="center-justified">
          <i id="fullSupply{{$index}}"
             ng-class="{'icon-ok': programProduct.product.fullSupply}"></i>
        </td>
        <td id="code{{$index}}" ng-bind="programProduct.product.code"></td>
        <td><a id="name{{$index}}" href="" ng-click="edit(programProduct.product.id)" ng-bind="programProduct.product.primaryName"></a></td>
        <td id="program{{$index}}" ng-bind="programProduct.program.name"></td>
        <td id="strength{{$index}}" ng-bind="programProduct.product.strength"></td>
        <td id="unit{{$index}}" ng-bind="programProduct.product.dosageUnit.code"></td>
        <td id="dispensingUnit{{$index}}" ng-bind="programProduct.product.dispensingUnit"></td>
        <td id="packSize{{$index}}" class="right-justified" ng-bind="programProduct.product.packSize"></td>
        <td class="center-justified">
          <i id="globalActive{{$index}}"
             ng-class="{'icon-ok': programProduct.product.active}"></i>
        </td>
        <td class="center-justified" ng-show="programProduct.active != undefined">
          <i id="activeAtProgram{{$index}}"
             ng-class="{'icon-ok': programProduct.active}"></i>
        </td>
        <td class="center-justified" ng-show="hasPermission('VIEW_PRODUCT_RATIONING')">
            <a ng-hide="isAdjustmentExists(programProduct.product.id)" href="" ng-click="addRationing(programProduct.product.id)" class="btn btn-primary">
              <span id="addRationing" openlmis-message="button.add"></span>
            </a>
            <a ng-show="isAdjustmentExists(programProduct.product.id)" ng-click="addRationing(programProduct.product.id)" class="btn btn-primary">
              <span id="editRationing" openlmis-message="button.edit"></span>
            </a>
        </td>
        <td class="center-justified" id="undefinedActive{{$index}}" ng-show="programProduct.active == undefined">NA</td>
      </tr>
      </tbody>
    </table>
  </div>

  <pagination total-items="totalItems" page="currentPage" max-size="5" items-per-page="pagination.limit"
              direction-links="false" ng-show="programProducts.length" class="pagination-sm"></pagination>
</div>
